// 在node环境中无法操作DOM 和 BOM，
// 但是如果非要操作DOM 和 BOM 我们需要使用第三方库 jsdom
const {JSDOM} = require('jsdom');
const fs = require('fs');
const root = new JSDOM(`<!DOCTYPE html><html><head></head><body>
  <div id="app"></div>
</body></html>`);

// 请求接口，拿到数据，填充到 app 中
// fatch node 18版本之后才有
const document = root.window.document
fetch('https://api.thecatapi.com/v1/images/search?limit=10&page=1').then(res => res.json()).then(data => {
  const app = document.getElementById('app')
  data.forEach(item=>{
      const img =  document.createElement('img')
      img.src = item.url
      img.style.width = '200px'
      img.style.height = '200px'
      app.appendChild(img)
  })
  // params：文件路径，要写入的内容
  fs.writeFileSync('./index.html', root.serialize())
})
// SSR 服务端渲染 next.js express nuxt.js      ==> toC新闻网站，博客网站，门户网站

// CSR 客户端渲染 vue react SPA ajsx webscoket ==> toB系统 后台

// SEO 搜索引擎优化 title description keywords 语义化标签 a标签的href